<template>
  <div class="header">
    <div class="top">
      <router-link class="box" to="mymine">
        <div class="iconfont icon-zuojiantou"></div>
        <div class="back">返回</div>
      </router-link>
      <div class="text">地址列表</div>
    </div>
    <div class="middle">
      <div class="bg"></div>
    </div>
    <div class="bottom">
      <van-empty description="没有地址，请新增地址">
        <van-button round class="bottom-button">新增地址</van-button>
      </van-empty>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.header {
    position: relative;
  .top {
    display: flex;
    margin-left: 10px;
    margin-top: 10px;
    .box {
      display: flex;
      .iconfont {
      }
      .back {
      }
    }
    .text {
      margin-left: 120px;
    }
  }
  .middle {
    .bg {
      width: 100%;
      height: 100px;
      background-color: #0c34ba;
    }
  }
  .bottom {
      width: 98%;
      position: absolute;
      left: 0;
      top: 90px;
      background-color: #fff;
      margin-left: 3px;
      border-radius: 20px;
      .bottom-button {
          background-color: #0c34ba;
          color: #fff;
      } 
  }
}
</style>


<script>
import "@/assets/fonts/iconfont.css";
export default {
  name: "dizhi",
};
</script>